<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,body {
				background-color: #efeff4;
				padding: 0px;
				margin: 0px;
			}
			.mui-content>.mui-table-view:first-child{
				margin: 0px;
			}
			 .oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
				width: 46px;
				height: 46px;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, .oa-contact-position {
				float: left;
			}
			.oa-contact-email{
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
		</style>
	</head>

	<body>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div class="mui-content" id="contact">
			
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				<li class="mui-table-view-cell" v-for="con in contacts">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img :src="con.type=='暗线'?'../img/userPhoto.jpg':'../img/roomPhoto.jpg'" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">{{con.name}}</h4>
									<span class="oa-contact-position mui-h6">{{con.type}}</span>
								</div>
								<p class="oa-contact-email mui-h6">
									{{con.msg}}
								</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			let contactList=new Vue({
				el:"#contact",
				data:{
					contacts:[
						// {
						// 	id:10000,
						// 	name:'那头',
						// 	type:'会议',
						// 	msg:'这是一个激烈讨论的会议'
						// }
					]
				},
				methods:{
					pushContacts:function(item){
						this.contacts.push(item);
					},
					clearContacts:function(){
						this.contacts=[];
					}
				}
			});
			
			 window.addEventListener('InitList',function(event){
								// console.log('触发加载好友');
				contactList.clearContacts();
			 	for (let conor of event.detail) {
					console.log(conor.id);
					let item={};
					item.id=conor.id;
					console.log(item.id);
					item.name=conor.user_name;
					item.type=conor.type;
					console.log(item.type);
					item.msg='这个人并不懒，但是系统没有给他留言的机会';
			 		contactList.pushContacts(item);
			 	}
			 });
			mui.plusReady(function () {
			   
			});
		</script>
	</body>

</html>